<template>
    <div class="package-revision">
        <van-search v-model="search" placeholder="搜索" />

        <div class="main">
            <div class="item" :key="index">
                <!-- <LineTitle :value="item.attr" :has-pad="true" /> -->
                <div class="btn-title white-color">
                    {{productSpec[specIndex].attr}}
                </div>
                <div class="inner">
                    <PackageSelect :keyword="search" :spec-index="specIndex" :id="pkgId"/>
                </div>
            </div>
        </div>
        <div class="fixed-btn-wrap text-normal">
            <div class="btn btn-mobile btn-large btn-block btn-white-red" @click="onClickSure">
                确认产品
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    currency,
} from '@/lib/utils';
import store from '@/store';
import PackageSelect from '@/features/pkg/newPackageSelect.vue';
import LineTitle from '@/components/common/lineTitle.vue';
import { Component, Vue } from 'vue-property-decorator';
import { Route } from 'vue-router';

Component.registerHooks([
    'beforeRouteEnter',
]);

@Component({
    name: 'PkgRevision',
    components: {
        PackageSelect,
        LineTitle,
    },
})
export default class PkgRevision extends Vue {
    public search = '';

    public get pkgId() {
        return this.$route.params.pkgId;
    }
    public get specIndex() {
        return this.$route.params.specIndex;
    }
    public get productDetailMap() {
        return store.state.pkg.productDetailMap;
    }
    public get productSpecMap() {
        return store.state.pkg.productSpecMap;
    }
    public get selectedGoodsSpecMap() {
        return store.state.pkg.selectedGoodsSpecMap;
    }
    public get detail() {
        return this.pkgId && this.productDetailMap[this.pkgId] ? this.productDetailMap[Number(this.pkgId)] : null;
    }
    public get productSpec() {
        return this.pkgId && this.productSpecMap[this.pkgId] ? this.productSpecMap[Number(this.pkgId)] : [];
    }
    public get selectedGoodsSpec() {
        return this.pkgId && this.selectedGoodsSpecMap[this.pkgId] ? this.selectedGoodsSpecMap[Number(this.pkgId)] : [];
    }
    public get value() {
        return this.specIndex !== null && this.selectedGoodsSpec.length ? this.selectedGoodsSpec[Number(this.specIndex)] : [];
    }
    public get mustSelectOne() {
        return this.value.some((item: any) => item.is_default);
    }
    /** 是否一定要选择 */
    public get canSure() {
        return this.value.reduce((prev: any, next: any) => {
            return {
                number: prev.number + next.number,
            };
        }, {
            number: 0,
        }).number >= 1 || !this.mustSelectOne;
    }
    /** 原本价格 */
    public get oldPriceText() {
        return this.detail && this.detail.price ? currency(this.detail.price) : 0;
    }
    public get defaultSpecPrice() {
        if (!this.detail || !this.productSpec.length) {
            return 0;
        }

        const optionList: Pkg.SpecValue[] = this.productSpec.map((item) => {
            return item.values.filter((val) => {
                return val.is_default;
            });
            // @ts-ignore
        }).flat(Infinity);
        // 以分为单位
        const price = optionList.reduce((prev, item) => {
            return prev + Number(item.price) * item.discount / 100 * item.number;
        }, 0);
        return Math.round(price);
    }
    public get currentSpecPrice() {
        if (!this.selectedGoodsSpec.length) {
            return 0;
        }

        // 以分为单位
        return this.selectedGoodsSpec.reduce((prev, item) => {
            let total = 0;
            item.forEach((val) => {
                total += Number(val.price) * val.discount / 100 * val.number;
            });
            return prev + total;
        }, 0);
    }

    public onClickSure() {
        if (!this.canSure) {
            wx.showToast({
                title: '请至少选择一项',
                icon: 'none',
            });
            return;
        }
        // 表明存在默认产品
        // if (this.mustSelectOne) {
        //     // 检查价格是否大于默认产品
        //     if (this.currentSpecPrice < this.defaultSpecPrice) {
        //         wx.showToast({
        //             title: '调整产品不得低于默认产品价格',
        //             icon: 'none',
        //         });
        //         return;
        //     }
        // }
        store.commit('pkg/setSureGoodsSpec', {
            id: this.pkgId,
        });
        wx.navigateBack();
    }

    public async beforeRouteEnter(to: Route, from: Route, next: any) {
        const pkgId = to.params.pkgId;

        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('pkg/getDetail', {
                id: pkgId,
            }),
            store.dispatch('pkg/getProductSpec', {
                pkgId,
            }),
        ]);
        store.commit('pkg/resetSelectedGoodsSpec', {
            id: pkgId,
        });
        store.commit('utils/endRequest');
        next();
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.package-revision {
    min-height: 100%;
    padding-bottom: 100px;
    // background-color: @color-default-bg;
    background-color: #ffe2e4;
    .main {
        .item {
            .title {
                padding: 15px 0;
                text-align: center;
            }
            .btn-title {
                width: 222px;
                height: 26px;
                line-height: 26px;
                margin-top: 10px;
                margin-bottom: 10px;
                margin-left: 50%;
                transform: translateX(-50%);
                background: #EA4B58;
                border-radius: 7px;
                font-size: 14px;
                text-align: center;
            }
           .inner {
                box-sizing: border-box;
                margin: 0 10px;
                // padding: 0 30rpx;
                border-radius: 7px;
            }
        }
    }
    .fixed-btn-wrap {
        padding: 10px 40rpx;
    }
}

</style>
